
<style>
.red{color:red;}
</style>
<div id="app" >
	<div>

	关键字：<input type="text" id="keyword" v-model="keyword"  placeholder="请输入......"/>&nbsp;&nbsp;
	<input type="submit" id="search" value="search">
	<span>{{keyword}}</span><br>
	<span>全局ftype：{{ftype}}</span>	
	<br><span>全局brandid：{{brand_id}}</span>
	<br><span>全局page：{{page}}</span>
	</div>

	<div>
		<div>
			<h2>分类：</h2>
			<p id="ftypeList">
			     
			  <template v-for="(item,key) in ftypeList">
			  <a v-bind:class="{ red: item.isred }" v-on:click="ftypeclick(key)">{{item.title}}</a>&nbsp;
			  
			  </template>
					</p>
			<p id="catList">
					
					
			   
					</p>
			
		</div>
		<div>
			<h2>品牌：</h2>
			<p id="brandList">
			   <template v-for="(item,key) in brandList">
			  <a v-bind:class="{ red: item.isred }" v-on:click="brandclick(key)">{{item.title}}</a>&nbsp;
			  
			  </template>
					</p>

		</div>
	</div>

	<div id="list">

		<table align="left" border="1" width="100%">
					<tr>
				<td><pre>{{goodsList}}
	</td>
			</tr>
			
		</table>
	</div>

	<div id="pagenav">
		<div id="pagenav">
		<template v-for="(page,key) in pages">
			<a @click="pageclick(page.page)">{{page.title}}</a>&nbsp;
		</template>
		</div></div>

</div>

<script src="/mvc/Static/js/jquery-1.10.1.min.js"></script>
<script src="/mvc/Static/js/vue.js"></script>
<script>
	var vm = new Vue({
        el: '#app',
        data: {
			ftype: 0 , 
			brand_id:0,
            keyword: "",
			page  : 1,
			goodsList : "adsfasdfasdf",
			ftypeList : [

				{"ftype":0,"title":"全部","isred":true},
				{"ftype":1,"title":"大分类1","isred":false},
				{"ftype":2,"title":"大分类2","isred":false},
				{"ftype":3,"title":"大分类3","isred":false}

			],
			brandList : [

				{"brand_id":0,"title":"全部","isred":true},
				{"brand_id":1,"title":"品牌1","isred":false},
				{"brand_id":2,"title":"品牌2","isred":false},
				{"brand_id":3,"title":"品牌3","isred":false}

			],
			pages :[
				{"page":1,"title":"首页"},
				{"page":1,"title":"上一页"},
				{"page":2,"title":2},
				{"page":3,"title":"下一页"},
				{"page":3,"title":"尾页"},
			]
        },
        methods: {
			brandclick : function(key){
				
				for(var i=0;i<this.brandList.length ; i++){
					if(key == i){
						this.brandList[key].isred = true;
						this.brand_id = this.brandList[key].brand_id;
					}else{
						this.brandList[i].isred = false;
					}
				}
				

			},
			ftypeclick : function(key){
				
				for(var i=0;i<this.ftypeList.length ; i++){
					if(key == i){
						this.ftypeList[key].isred = true;
						this.ftype = this.ftypeList[key].ftype;
					}else{
						this.ftypeList[i].isred = false;
					}
				}
				

			},
            pageclick:function(page){
				alert(page);
				this.page = page;
			}
        }
    })
</script>
